<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<div id="app">-->
<!--    <span>登录</span>-->
<!--    <span>注册</span>-->
<!--    <hr>-->
<!--    <login></login>-->
<!--    <regist></regist>-->
<!--</div>-->
<div id="app">
    <span><router-link to="/login">登录</router-link></span>
    <span><router-link to="/regist">注册</router-link></span>

    <hr/>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script src="login.js"></script>
<script src="regist.js"></script>
<script>
    /*
    * 1、引入vue-router依赖
    * 2、定义路由规则   path:访问路径   component:访问对应的组件
    * 3、路由规则注册到VueRouter实例
    * 4、需要在vue中将router来进行注册
    * 5、需要定义锚点      <router-view>
    * */

    //创建一个对象  局部组件，需要在vue实例进行注册
    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    const routes = [
        { path: '/login', component: login },
        { path: '/regist', component: regist }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })

    //创建vue实例    new Vue({})
    var vm = new Vue({
        el: '#app',   //  elment 缩写：元素  绑定的是id属性值为app的页面元素 ,对象作用范围是在当前绑定元素下
        data: {       //data属性，是一个数据对象 {}
        },
        router
    })

</script>
</html>